<template>
  <div class="wrap">
    <div v-if="message_arr.length == 0" class="noData">
      <img src="./../../assets/img/noData.png" alt="" />
      <div class="txt">暂无消息</div>
    </div>
    <div v-else class="ul">
      <van-swipe-cell
        :right-width="rightWidth"
        class="message-li"
        v-for="(item, index) in message_arr"
        :key="index"
        :id="item.message_id"
      >
        <div class="content" @click="handleSet(item.message_id, item, $event)">
          <div class="li-left">
            <img
              :src="
                item.user_id == item.biz_user_id
                  ? require('@/assets/img/health-message.png')
                  : require('@/assets/img/health-message-carry.png')
              "
            />
          </div>
          <div class="li-right">
            <div class="title">{{ item.message_title }}</div>
            <div class="time">{{ item.created_time }}</div>
            <div
              :class="[
                'detail',
                item.message_detail == '未通过' ? 'detail-active' : '',
              ]"
            >
              {{ item.message_detail }}
            </div>
            <div class="desc" v-show="item.desc !== ''">
              备注：{{ item.desc }}
            </div>
          </div>
          <div class="status" v-if="item.status == 'UNREAD'"></div>
        </div>
        <template #right>
          <van-button
            square
            type="danger"
            text="删除"
            :stop-propagation="true"
            @click="onClose(item.message_id)"
          />
        </template>
      </van-swipe-cell>
    </div>
    <!-- 群组二维码 -->
    <!-- <img :src="qrcode" alt="" /> -->
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { showToast, showConfirmDialog } from 'vant'
import { postData } from './../../request/request.js'
import { useRoute } from 'vue-router'
let route = useRoute()
let query = route.query
localStorage.clear()
localStorage.setItem('user_id', query.user_id || '')
localStorage.setItem('access_token', query.access_token || '')
localStorage.setItem('open_id', query.open_id || '')
localStorage.setItem('currentPath', query.currentPath || '')

const rightWidth = ref(60)
const message_arr = ref([])
const qrcode = ref('')

const initList = () => {
  postData('/user/message/list', {
    unread: 0,
    only_count: 0,
  })
    .then((res) => {
      message_arr.value = res?.datas?.messages || []
      // message_arr.value = [
      //   {
      //     message_id: '3010001172542883497464-1111',
      //     message_type: 'NORMAL',
      //     user_id: '10010135172542855597452',
      //     message_title: '健康证审核结果',
      //     message_detail: '审核通过',
      //     status: 'UNREAD',
      //     created_time: '2024-07-25 12:53:10',
      //   },
      //   {
      //     message_id: '3010001172542883497464-2222',
      //     message_type: 'NORMAL',
      //     user_id: '10010135172542855597452',
      //     message_title: '标题22222',
      //     message_detail: '描述描述描述',
      //     status: 'UNREAD',
      //     created_time: '2024-07-25 12:53:10',
      //   },
      //   {
      //     message_id: '3010001172542883497464-3333',
      //     message_type: 'NORMAL',
      //     user_id: '10010135172542855597452',
      //     message_title: '标题3333',
      //     message_detail: '描述描述描述',
      //     status: 'READ',
      //     created_time: '2024-07-25 12:53:10',
      //   },
      // ]
    })
    .catch((err) => {
      console.log(err)
    })
}

//点击设置-已读并跳转到健康证
const handleSet = (id, item, e) => {
  //console.log('click')
  let messagesId = []
  messagesId.push(id)
  postData('/user/message/read', {
    messages: messagesId,
  })
    .then((res) => {
      if (res.code == 0) {
        // if (item.status == 'UNREAD') {
        //   showToast('已读')
        // }
        //initList()

        //setTimeout(() => {
        if (item.user_id == item.biz_user_id) {
          wx &&
            wx.miniProgram.navigateTo({
              url: '/pagesC/myInfo/myHealthCard',
            })
        } else {
          wx &&
            wx.miniProgram.navigateTo({
              url: `/pagesC/carryUserDetail/carryUserHealthCard?carriedUserid=${item.biz_user_id}`,
            })
        }
        //}, 2000)
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

//左滑-删除-关闭
let onClose = (id) => {
  let messagesId = []
  messagesId.push(id)
  postData('/user/message/delete', {
    messages: messagesId,
  })
    .then((res) => {
      if (res.code == 0) {
        showToast('已删除')
        initList()
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

let loginPhone = () => {
  localStorage.clear()
  localStorage.setItem('open_id', query.open_id || '')
  localStorage.setItem('user_id', query.user_id || '')
  localStorage.setItem('access_token', query.access_token || '')
  localStorage.setItem('currentPath', query.currentPath || '')
  let user_id = localStorage.getItem('user_id')
  let currentPath = localStorage.getItem('currentPath')
  if (!user_id || user_id == '') {
    wx &&
      wx.miniProgram.redirectTo({
        url:
          '/pages/loginPhone/loginPhone?currentPath=' +
          encodeURIComponent(currentPath),
      })
  } else {
    initList()
    // initCode()   //群组
  }
}

// const initCode = () => {
//   postData('/user/group/qrcode/image/get', {
//     group_id: '10111700100173563435852557',
//   })
//     .then((res) => {
//       console.log(res)
//       qrcode.value = res?.datas?.qrcode
//     })
//     .catch((err) => {
//       console.log(err)
//     })
// }

onMounted(() => {
  loginPhone()
})

watch(
  () => route.fullPath,
  () => {
    loginPhone()
  }
)
</script>

<style scoped>
.wrap {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  background: #f7f7f8;
}
.noData {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.noData img {
  width: 0.6rem;
  height: 0.6rem;
}
.noData .txt {
  margin-top: 0.1rem;
  font-size: 0.14rem;
  color: #8d8f91;
}
.ul {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  color: #333;
  font-size: 0.16rem;
}
.van-swipe-cell {
  width: 100%;
  height: 100%;
}

.message-li .van-swipe-cell__wrapper {
  width: 100%;
  height: 100% !important;
}
.message-li {
  height: auto;
  background: #fff;
  margin: 0.05rem 0;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}
.content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0.1rem 0.2rem;
}
.li-left {
  display: flex;
  justify-content: center;
  align-items: center;
}
.li-left img {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
}
.li-right {
  margin-left: 0.3rem;
  height: 100%;
  flex: 1;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  font-size: 0.16rem;
}

.li-right .box .txt {
  /* margin-left: 0.075rem; */
}
.li-right .title {
  height: 0.25rem;
  line-height: 0.25rem;
  color: rgba(26, 27, 29, 1);
}
.li-right .detail {
  height: 0.25rem;
  line-height: 0.25rem;
  color: rgb(11, 116, 11);
}
.li-right .detail-active {
  color: #bd2b2b;
}
.li-right .time {
  height: 0.25rem;
  line-height: 0.25rem;
  color: #676a6d;
}
.li-right .desc {
  height: 0.25rem;
  line-height: 0.25rem;
  color: #676a6d;
  font-size: 0.14rem;
}

.status {
  width: 0.08rem;
  height: 0.08rem;
  border-radius: 50%;
  background: #c91e1e;
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
}
.van-swipe-cell {
  transition: transform 0.3s; /* 确保过渡效果适当 */
}
</style>
